<template>
  <div class="cache-container">
    <el-card class="system-status info">
      <div>系统状态</div>
      <div class="demo-progress">
        <div class="demo-progress-item">
          <el-progress type="dashboard" :percentage="CPU.userPercent" :color="colors" />
          <span>CPU用户使用率</span>
        </div>
        <div class="demo-progress-item">
          <el-progress type="dashboard" :percentage="CPU.systemPercent" :color="colors" />
          <span>CPU系统使用率</span>
        </div>
        <div class="demo-progress-item">
          <el-progress type="dashboard" :percentage="systemMemory.memoryUsedRate" :color="colors" />
          <span>系统内存使用率</span>
        </div>
        <div class="demo-progress-item">
          <el-progress type="dashboard" :percentage="JVMMemory.memoryUsageRate" :color="colors" />
          <span>JVM内存使用率</span>
        </div>
      </div>
    </el-card>
    <el-card class="system-information info">
      <el-descriptions class="margin-top" title="系统信息" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作系统</div>
          </template>
          {{ systemInformation.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作系统架构</div>
          </template>
          {{ systemInformation.arch }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">系统启动时间</div>
          </template>
          {{ systemInformation.systemBootTime }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">系统运行时间</div>
          </template>
          {{ systemInformation.systemUptime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <div class="cache-information">
      <el-card class="info information-item">
        <el-descriptions class="margin-top" title="系统内存" :column="1" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">内存总量</div>
            </template>
            {{ systemMemory.total }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">已用内存</div>
            </template>
            {{ systemMemory.used }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">可用内存</div>
            </template>
            {{ systemMemory.available }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">交换区总量</div>
            </template>
            {{ systemMemory.swapTotal }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">已使用交换区</div>
            </template>
            {{ systemMemory.swapUsed }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">剩余交换区</div>
            </template>
            {{ systemMemory.swapFree }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">内存使用率</div>
            </template>
            {{ systemMemory.memoryUsedRate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">交换区使用率</div>
            </template>
            {{ systemMemory.swapUsedRate }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="info information-item">
        <el-descriptions class="margin-top" title="JVM内存" :column="1" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM名称</div>
            </template>
            {{ JVMMemory.vmName }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM版本</div>
            </template>
            {{ JVMMemory.vmVersion }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM厂商</div>
            </template>
            {{ JVMMemory.vmVendor }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM运行时间</div>
            </template>
            {{ JVMMemory.uptime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM内存最大</div>
            </template>
            {{ JVMMemory.heapMemoryMax }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM内存已用</div>
            </template>
            {{ JVMMemory.heapMemoryUsed }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">非堆内存使用</div>
            </template>
            {{ JVMMemory.nonHeapMemoryUsed }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM使用率</div>
            </template>
            {{ JVMMemory.memoryUsageRate }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div class="cache-information">
      <el-card class="info information-item">
        <el-descriptions class="margin-top" title="CPU" :column="1" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">CPU名称</div>
            </template>
            {{ CPU.name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">CPU物理核心数</div>
            </template>
            {{ CPU.physicalProcessorCount }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">CPU逻辑核心数</div>
            </template>
            {{ CPU.logicalProcessorCount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">处理器频率</div>
            </template>
            {{ CPU.vendorFreq }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">用户使用率</div>
            </template>
            {{ CPU.userPercent }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">系统使用率</div>
            </template>
            {{ CPU.systemPercent }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">空闲率</div>
            </template>
            {{ CPU.idlePercent }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="info information-item">
        <div class="information-title">系统前6进程</div>
        <el-table :data="processData" border :stripe="true">
          <el-table-column label="进程ID" prop="processID" align="left" />
          <el-table-column label="名称" prop="name" align="left" />
          <el-table-column label="CPU负载(%)" prop="cpuLoad" align="left" />
        </el-table>
      </el-card>
    </div>
    <el-card class="info information-item">
      <div class="information-title">文件存储</div>
      <el-table :data="fileStoreList">
        <el-table-column label="名称" prop="name" align="left" />
        <el-table-column label="挂载点" prop="mount" align="left" />
        <el-table-column label="类型" prop="type" align="left" />
        <el-table-column label="总空间" prop="totalSpace" align="left" />
        <el-table-column label="已用空间" prop="usedSpace" align="left" />
        <el-table-column label="可用空间" prop="usableSpace" align="left" />
        <el-table-column label="已用百分比(%)" prop="usedPercentage" align="left" />
      </el-table>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Process, File } from '@interface/service'

import { systemMonitor } from '@api/service'

const state = reactive({
  systemInformation: {
    name: '',
    arch: '',
    systemBootTime: '',
    systemUptime: '',
    manufacturer: ''
  },
  systemMemory: {
    total: '',
    used: '',
    available: '',
    swapTotal: '',
    swapUsed: '',
    swapFree: '',
    memoryUsedRate: '',
    swapUsedRate: ''
  },
  JVMMemory: {
    vmName: '',
    vmVersion: '',
    vmVendor: '',
    uptime: '',
    heapMemoryUsed: '',
    heapMemoryMax: '',
    memoryUsageRate: '',
    nonHeapMemoryUsed: ''
  },
  CPU: {
    name: '',
    vendorFreq: '',
    physicalProcessorCount: '',
    logicalProcessorCount: '',
    userPercent: '',
    systemPercent: '',
    idlePercent: ''
  },
  processData: [] as Process[],
  fileStoreList: [] as File[],
  colors: [
    { color: '#f56c6c', percentage: 100 },
    { color: '#e6a23c', percentage: 80 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 40 },
    { color: '#6f7ad3', percentage: 20 }
  ]
})

const { processData, systemInformation, systemMemory, JVMMemory, CPU, fileStoreList, colors } =
  toRefs(state)

const percentage = ref<number>(0)

onMounted(() => {
  getInfo()
})
const getInfo = async () => {
  const info = await systemMonitor()
  const { centralProcessor, fileStores, globalMemory, jvm, operatingSystem, processes } = info.data
  systemInformation.value = operatingSystem
  systemMemory.value = globalMemory
  JVMMemory.value = jvm
  CPU.value = centralProcessor
  processData.value = processes
  fileStoreList.value = fileStores
}
</script>
<style lang="scss" scoped>
.cache-container {
  height: 95vh;
  overflow: auto;
  .system-status {
  }
  .system-information {
  }
  .info {
    margin: 10px;
  }
  .cache-information {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .information-item {
      flex: 1;
    }
  }
  .demo-progress {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .demo-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .demo-progress-item span {
    font-size: 12px;
  }
  .information-title{
    margin-bottom: 20px;
    font-weight: bolder;
  }
}
</style>
